<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script >
            function  alertSomething(){
              alert("你好")
              }

            function delete_confirm() <!--调用方法-->
            {
                event.returnValue = confirm("确定 or 取消");
                alert(event.returnValue);
            }

            function onPrompt()
			{
				console.log("onPrompt method");
				var b = prompt("please input your password", "aaa");
				alert("your input is " + b);
			}

        //获得图片
        function getPic() {
           //发送消息给java代码
           var data="{action:\"getPic\",value:\"\"}";
           //第一个参数要发送的数据 第二个参数js在被回调后具体执行方法，responseData为java层回传数据
           window.WebViewJavascriptBridge.send(
               data
               , function(responseData) {
                  bridgeLog('来自Java的回传数据： ' +responseData);
               }
           );
       }
       //获取位置
        function getloc() {
           //发送消息给java代码
           var data="{action:\"getLoc\",value:\"\"}";
           //第一个参数要发送的数据 第二个参数js在被回调后具体执行方法，responseData为java层回传数据
           window.WebViewJavascriptBridge.send(
               data
               , function(responseData) {
                  bridgeLog('来自Java的回传数据： ' +responseData);
               }
           );
       }
       function bridgeLog(logContent) {
           document.getElementById("log_msg").innerHTML = logContent;
       }
    //登录接口
    function logins(){
       //var data={action:"login",value:"{userID:\"1001\",GroupTag:\"1#2\"}"};

       var data={action:"login",value:"{userID:\"王成全\",GroupTag:\"5\"}"};

        console.log(JSON.stringify(data));
      // var data="{action:\"login\",value:{userID:\"1001\",GroupTag:\"1#2\"}}";
       //第一个参数要发送的数据 第二个参数js在被回调后具体执行方法，responseData为java层回传数据
       window.WebViewJavascriptBridge.send(
           JSON.stringify(data)
           , function(responseData) {
              bridgeLog('来自Java的回传数据： ' +responseData);
           }
       );
    }
    //调用缓存接口
    function clearHC(){
        var data={action:"clearCache",value:""};
       //第一个参数要发送的数据 第二个参数js在被回调后具体执行方法，responseData为java层回传数据
       window.WebViewJavascriptBridge.send(
           data
           , function(responseData) {
              bridgeLog('来自Java的回传数据： ' +responseData);
           }
       );
    }
    //调用返回上一层接口
    function goback(){
         var data={action:"goBack",value:""};
       //第一个参数要发送的数据 第二个参数js在被回调后具体执行方法，responseData为java层回传数据
       window.WebViewJavascriptBridge.send(
           data
           , function(responseData) {
              bridgeLog('来自Java的回传数据： ' +responseData);
           }
       );
    }

    //调用退出接口
    function exitApp(){
        var data={action:"closeApp",value:""};
       //第一个参数要发送的数据 第二个参数js在被回调后具体执行方法，responseData为java层回传数据
       window.WebViewJavascriptBridge.send(
           data
           , function(responseData) {
              bridgeLog('来自Java的回传数据： ' +responseData);
           }
       );
    }
    //调用获取缓存大小接口
    function getCatchSize(){
        var data={action:"getCache",value:""};
       //第一个参数要发送的数据 第二个参数js在被回调后具体执行方法，responseData为java层回传数据
       window.WebViewJavascriptBridge.send(
           data
           , function(responseData) {
              bridgeLog('来自Java的回传数据： ' +responseData);
              document.getElementById("locInfo").innerHTML = (catchSize);

           }
       );
    }

       //注册事件监听
       function connectWebViewJavascriptBridge(callback) {
           if (window.WebViewJavascriptBridge) {
               callback(WebViewJavascriptBridge)
           } else {
               document.addEventListener(
                   'WebViewJavascriptBridgeReady'
                   , function() {
                       callback(WebViewJavascriptBridge)
                   },
                   false
               );
           }
       }

       //注册回调函数，第一次连接时调用 初始化函数
       connectWebViewJavascriptBridge(function(bridge) {
           bridge.init(function(message, responseCallback) {
               bridgeLog('默认接收收到来自Java数据： ' + message);
               var responseData = '默认接收收到来自Java的数据，回传数据给你';
               responseCallback(responseData);
           });

            //监听图片接口事件
           bridge.registerHandler("setImgPic", function(data, responseCallback) {
               //bridgeLog('setImgPic： ' + data);
               document.getElementById("picInfo").innerHTML = ("data from Java: = " + data);
               var responseData = '指定接收收到来自Java的数据，回传数据给你';
               responseCallback(responseData);
           });
            //监听位置接口事件
           bridge.registerHandler("setLoc", function(data, responseCallback) {
               document.getElementById("locInfo").innerHTML = ("data from Java: = " + data);
               var responseData = '指定接收收到来自Java的数据，回传数据给你';
               responseCallback(responseData);
           });
            //监听推送信息接口事件
           bridge.registerHandler("setPushInfo", function(data, responseCallback) {
               document.getElementById("locInfo").innerHTML = ("data from Java: = " + data);
               alert(data+"...meme");
               var responseData = '1';
               responseCallback(responseData);
           });

           //监听返回键导航
           bridge.registerHandler("navCtrl", function(data, responseCallback) {
               //自行控制导航

               document.getElementById("goBackBtn").innerHTML = ("tatch me。。。");
           });

       })
   </script>

</head>
<body>
<p>WebViewJsBridge</p>
<input type="file" value="" class='zj-up-btn pa' name="上传文件" id="uploadfile" onchange="form.submit()" /></p>
<input type="button" name="button" value="JS提示对话框" onClick="alertSomething()"></p>
<input type="button" name="button2"value="js确定or取消对话框" onClick="delete_confirm()"></p>
<input type="button" value="prompt对话框" onclick="onPrompt()" /><br />
<br />

<input type="button" name="button1" id="button1" value="调用图片接口" onClick="getPic()"></p>
<p id="picInfo">这里输出图片信息。。。</p>
<br />

<input type="button" name="button2" id="button2" value="调用位置接口" onClick="getloc()"></p>
<p id="locInfo">loc</p>
<br />

<input type="button" name="button3" value="清缓存" onClick="clearHC()"></p>

<input type="button" name="button4" value="返回" onClick="goback()"></p>

<input type="button" name="button5" value="登录" onClick="logins()"></p>

<input type="button" name="button6" value="退出" onClick="exitApp()"></p>

<input type="button" name="button6" value="获取缓存大小" onClick="getCatchSize()"></p>
<p id="catchSize">catch size。。。</p>
<br />

<p id="goBackBtn">del go back。。。</p>


<div id="log_msg">调用打印信息</div>

</body>
</html>